<template>
  <div>
    <el-breadcrumb separator="/">
    	<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    	<el-breadcrumb-item>商城管理</el-breadcrumb-item>
    	<el-breadcrumb-item>品类管理</el-breadcrumb-item>
    </el-breadcrumb>
	
	<el-card>
		<el-row>
			<el-col :span="6">
				<el-button type="primary" @click="showAdd">新增</el-button>
			</el-col>
		</el-row>
		
		<el-table :data="cateList" border stripe>
			<el-table-column label="序号" prop="sort"></el-table-column>
			<el-table-column label="品类名称" prop="name"></el-table-column>
			<el-table-column label="图标">
				<template slot-scope="scope">
					<img class="list-img" :src="scope.row.url" alt="">
				</template>
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<el-switch
					 v-model="scope.row.isDisabled"
					 @change="statusChanged(scope.row.isDisabled,scope.row.menuId)"
					 active-color="#13ce66"
					 inactive-color="#ff4949"
					 active-value="1"
					 inactive-value="0">
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button @click="showEdit(scope.row.menuId)" size="mini" type="primary" icon="el-icon-edit"></el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 分页 -->
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="pageCount"
		  :page-size="pageSize"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="total">
		</el-pagination>
		
		<el-dialog
		  title="新增品类"
		  :visible.sync="addDialogVisible"
		  width="60%">
			<el-form ref="addFormRef" :model="addForm" label-width="110px">
				<el-form-item label="序号">
					<el-input v-model="addForm.sort"></el-input>
				</el-form-item>
				<el-form-item label="名称">
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
				<el-form-item label="图标">
					<el-button type="primary" size="mini" @click="chooseImage">点击上传</el-button>
					<input @change="photoChange($event)" type="file" id="upload_file" multiple style="display: none"/>
					<div v-if="addForm.url != ''">
						<img class="editIcon" :src="'data:image/jpeg;base64,'+addForm.url" />
					</div>
				</el-form-item>
				<el-form-item label="保存后立即开启">
					<el-radio v-model="addForm.isDisabled" label="1">立即开启</el-radio>
					<el-radio v-model="addForm.isDisabled" label="0">暂不开启</el-radio>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addSub">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-dialog
		  title="编辑品类"
		  :visible.sync="editDialogVisible"
		  width="60%">
			<el-form ref="editFormRef" :model="editForm" label-width="110px">
				<el-form-item label="序号">
					<el-input v-model="editForm.sort"></el-input>
				</el-form-item>
				<el-form-item label="名称">
					<el-input v-model="editForm.name"></el-input>
				</el-form-item>
				<el-form-item label="图标">
					<el-button type="primary" size="mini" @click="chooseImageUpdate">点击上传</el-button>
					<input @change="photoUpdateChange($event)" type="file" id="upload_file_update" multiple style="display: none"/>
					<div>
						<img class="editIcon" :src="'data:image/jpeg;base64,'+editForm.url" />
					</div>
				</el-form-item>
				<el-form-item label="保存后立即开启">
					<el-radio v-model="editForm.isDisabled" label="1">立即开启</el-radio>
					<el-radio v-model="editForm.isDisabled" label="0">暂不开启</el-radio>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editSub">确 定</el-button>
			</span>
		</el-dialog>
		
	</el-card>
  </div>
</template>

<script>
  export default{
    data(){
		return{
			cateList:[],
			total:0,
			pageSize:20,
			pageCount:1,
			addDialogVisible:false,
			editDialogVisible:false,
			addForm:{
				"sort":null,"name":'',"url":"","isDisabled":"1"
			},
			editForm:{
				
			},
			value:'',
			fileList:[]
		}
	},
	created() {
		this.getList()
	},
	methods:{
		async getList(){
			const loading = this.$loading({
			  lock: true,
			  text: 'Loading',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			const {data:res} = await this.$http.post('/shopCategory/list',{
				pageSize:this.pageSize,
				pageCount:this.pageCount
			})
			this.total = res.data.total
			this.cateList = res.data.records
			setTimeout(() => {
			  loading.close();
			}, 500);
		},
		handleSizeChange(val) {
			// console.log(`每页 ${val} 条`);
			this.pageSize = val
			this.getList()
		},
		handleCurrentChange(val) {
			// console.log(`当前页: ${val}`);
			this.pageCount = val
			this.getList()
		},
		// 监听switch状态改变
		async statusChanged(isDisabled,id){
			const {data:res} = await this.$http.post('/shopCategory/updateType',{"id":id,"type":isDisabled})
			if(res.code!==200) {
				tableList.status = !tableList.status
				return this.$message.error('修改状态失败')
			}
		  this.$message.success('修改状态成功')
		},
		showAdd(){
			this.addForm ={
				"sort":null,"name":'',"url":"","isDisabled":'1'
			}
			this.addDialogVisible = true
		},
		async showEdit(menuId){
			const loading = this.$loading({
			  lock: true,
			  text: 'Loading',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			const {data:res} = await this.$http.post('/shopCategory/findById',{id:menuId})
			this.editDialogVisible = true
			this.editForm = res.data
			var urlBase = ''
			await this.$base64Img(this.editForm.url).then((res) => {		//调用全局方法
				urlBase = res
			})
			this.editForm.url = urlBase.split(',')[1]
			setTimeout(() => {
			  loading.close();
			}, 500);
		},
		chooseImage(){
			document.getElementById('upload_file').click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
		async photoChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.addForm.url = dataURL.split(',')[1]
			}else{
				alert('上传了非图片');
			}
		},
		chooseImageUpdate(){
			document.getElementById('upload_file_update').click(); //触发input-file文件上传控件 事件photoChange
　　　　　　 },
		async photoUpdateChange(el) {
			var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
			var type = file.type.split('/')[0];
			if ( type === 'image' ){
				var dataURL = await this.toBase64(file)
				this.editForm.url = dataURL.split(',')[1]
			}else{
				alert('上传了非图片');
			}
		},
		toBase64(file){
			return new Promise(function(resolve, reject) { 
				//将图片img转化为base64
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onloadend = function () {
					resolve(reader.result)
				};
			})
		},
		async editSub(){
			const loading = this.$loading({
			  lock: true,
			  text: 'Loading',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			const {data:res} = await this.$http.post('/shopCategory/update',{"imageBase":this.editForm.url,
					"isDisabled":this.editForm.isDisabled,
					"menuId":this.editForm.menuId,
					"name":this.editForm.name,
					"sort":this.editForm.sort})
			if(res.code!==200){
				return this.$message.error('修改失败')
			}else{
				this.$message.success('修改成功')
				this.editDialogVisible = false
				this.getList()
			}
			setTimeout(() => {
			  loading.close();
			}, 500);
		},
		async addSub(){
			const loading = this.$loading({
			  lock: true,
			  text: 'Loading',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			const {data:res} = await this.$http.post('/shopCategory/add',{"imageBase":this.addForm.url,
					"isDisabled":this.addForm.isDisabled,
					"name":this.addForm.name,
					"sort":this.addForm.sort})
			if(res.code!==200){
				return this.$message.error('增加失败')
			}else{
				this.$message.success('增加成功')
				this.addDialogVisible = false
				this.getList()
			}
			setTimeout(() => {
			  loading.close();
			}, 500);
		},
	}
  }
</script>

<style lang="less" scoped>
	.el-card{
		margin-top: 10px;
	}
	.list-img{
		width: 80px;
		height: 80px;
	}
	.editIcon{
		width: 80px;
		height: 80px;
	}
</style>
